<!DOCTYPE html>
<html lang="zh-cn">
 <head>
  <meta charset="utf-8" />
  <title>国内旅游</title>
  <!--链入对网页某类型元素的通用设置样式表-->
  <link href="css/common.css" rel="stylesheet" type="text/css"/>
  <!--链入对某个元素的特定设置的样式表-->
  <link href="css/main.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
  <!--右半边-->
  <section class="qui-page">
   <!--header-->
   <header class="qui-header">
      <h1>国内旅游计划</h1>
   </header>
   <!--/header-->
   <!--begin-->
   <section class="container"> <!--<section></section>语义化元素表示页面中的一个内容区块-->
      <div  class="plcRouteList">
          <a  href="#"> <img src="images/fengjing.jpg" width="100%" alt="" class="pic" />
          <div class="bottom ">
            <p class="face"><img src="images/touxiang.jpg" width="38" height="38" alt="" /></p>
            <h2 class="title">我的旅游行程</h2>
          </div>
          <p class="day">14天</p> </a>
          <div class="infos">
           <div>
            <em>城市</em>  <!--<em>标签表示其中的文本为强调的内容，这段文字显示为斜体。当然我们可以在样式表里清除其字体样式，重新设置其他字体样式-->
            <p> 昆明 - 香格里拉 - 西藏 </p>
           </div>
          </div>
        <!--</li>-->
       <!--</ul>-->
      </div>
   </section>
   <!--end-->
   <!--begin-->
   <section class="container"> <!--<section></section>语义化元素表示页面中的一个内容区块-->
    <div class="plcRouteList">
       <a  href="#"> <img src="images/华东.jpg" width="100%" alt="" class="pic" />
        <div class="bottom ">
         <p class="face"><img src="images/touxiang.jpg" width="38" height="38" alt="" /></p>
         <h2 class="title">我的旅游行程</h2>
        </div>
        <p class="day">15天</p> </a>
       <div class="infos">
        <div>
         <em>城市</em>  <!--<em>标签表示其中的文本为强调的内容，这段文字显示为斜体。当然我们可以在样式表里清除其字体样式，重新设置其他字体样式-->
         <p> 北京 - 常州 - 苏州 </p>
        </div>
       </div>
    </div>
   </section>
   <!--footer-->
   <footer class="qui-footerBasic">  <!--<footer></footer>表示整个页面或页面中一个内容区块的脚注。-->
    <p class="switchStyle"><span >手机版</span><a  href="#"><span>电脑版</span> </a><span><a href="#">APP</a></span></p>
   </footer>
   <!--footer end-->
  </section>
  <!--右半边end-->
  <!--侧边栏导航-->
  <aside class="qui-asides">   <!--语义化元素<aside></aside>表示article元素内容之外的、与article元素内容相关的辅助信息。-->
   <section class="qui-aside">
    <nav class="qui-asideNav">  <!--语义化元素<nav></nav>表示页面中导航链接的部分-->
     <ul>
      <li><a href="#" ><span>首页</span></a></li>
      <li><a href="#" ><span>目的地</span></a></li>
      <li><a href="#" ><span>酒店</span></a></li>
      <li><a href="#" ><span>机票</span></a></li>
      <li><a href="#" ><span>时间</span></a></li>
      <li><a href="#" ><span>点评</span></a></li>
     </ul>
    </nav>
    </section>
  </aside>
  <!--侧边栏导航 end-->
 </body>
</html>